<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位案例</title>
    <style>
        *{
            margin: 0;
            padding:0;
        }
        .whole{
            width: 912px;
            height: 600px;
            margin:0 auto;
            background-color: antiquewhite;
        }
        .pic{
            width: 275px;
            height: 275px;
            border: 6px solid #cccccc;
            float: left;
            margin:0 25px 25px 0;
            position:relative;
        }
        .pic .img1{
            width: 275px;
            height: 275px;
        }
        .img2{
            position:absolute;
            left: 7px;
            bottom: 7px;
        }
        .img3{
            position:absolute;
            left: 7px;
            bottom: 7px;
            display: none;
        }
        .pic p{
            /* padding:6px 0 5px 0; */
            padding-left: 5px;
            padding-top: 7px;
            top: 0;
            left: 0;
            position:absolute;
            display: none;
            color: white;
        }
        .pic:hover{
            opacity: 0.7;
        }
        .pic:hover .img3{
            display: block;
        }
        
        .pic:hover p{
            display: block;
            
        }
        .r1{
            margin-right: 0;
        }
        
    </style>
</head>
<body>
    <div class="whole">
        <div class="pic">
            <img src="./image-2/img001.jpg" class="img1" alt="">
            <img src="./image-2/小角标.png" class="img2" alt="">
            <img src="./image-2/小角标2.png" class="img3" alt="">
            <p>
                <img src="./image-2/角标.png" class="img4" alt="">
                <span>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio recusandae fugit ducimus suscipit error, alias
                    aperiam veniam tempore voluptatibus commodi hic temporibus quisquam repudiandae et, iure fugiat necessitatibus,
                    iste provident.Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio recusandae fugit ducimus suscipit error, alias
                    aperiam 
                </span>
            </p>
        </div>
        <div class="pic">
            <img src="./image-2/img02.jpg" class="img1" alt="">
            <img src="./image-2/小角标.png" class="img2" alt="">
            <img src="./image-2/小角标2.png" class="img3" alt="">
            <p>
                <img src="./image-2/角标.png" class="img4" alt="">
                <span>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio recusandae fugit ducimus suscipit error, alias
                    aperiam veniam tempore voluptatibus commodi hic temporibus quisquam repudiandae et, iure fugiat necessitatibus,
                    iste provident.Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio recusandae fugit ducimus suscipit error, alias
                    aperiam 
                </span>
            </p>
        </div>
        <div class="pic r1">
            <img src="./image-2/img03.jpg" class="img1" alt="">
            <img src="./image-2/小角标.png" class="img2" alt="">
            <img src="./image-2/小角标2.png" class="img3" alt="">
            <p>
                <img src="./image-2/角标.png" class="img4" alt="">
                <span>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio recusandae fugit ducimus suscipit error, alias
                    aperiam veniam tempore voluptatibus commodi hic temporibus quisquam repudiandae et, iure fugiat necessitatibus,
                    iste provident.Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio recusandae fugit ducimus suscipit error, alias
                    aperiam 
                </span>
            </p>
        </div>
        <div class="pic">
            <img src="./image-2/img04.jpg" class="img1" alt="">
            <img src="./image-2/小角标.png" class="img2" alt="">
            <img src="./image-2/小角标2.png" class="img3" alt="">
            <p>
                <img src="./image-2/角标.png" class="img4" alt="">
                <span>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio recusandae fugit ducimus suscipit error, alias
                    aperiam veniam tempore voluptatibus commodi hic temporibus quisquam repudiandae et, iure fugiat necessitatibus,
                    iste provident.Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio recusandae fugit ducimus suscipit error, alias
                    aperiam 
                </span>
            </p>
        </div>
        <div class="pic">
            <img src="./image-2/img06.jpg" class="img1" alt="">
            <img src="./image-2/小角标.png" class="img2" alt="">
            <img src="./image-2/小角标2.png" class="img3" alt="">
            <p>
                <img src="./image-2/角标.png" class="img4" alt="">
                <span>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio recusandae fugit ducimus suscipit error, alias
                    aperiam veniam tempore voluptatibus commodi hic temporibus quisquam repudiandae et, iure fugiat necessitatibus,
                    iste provident.Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio recusandae fugit ducimus suscipit error, alias
                    aperiam 
                </span>
            </p>
        </div>
        <div class="pic r1">
            <img src="./image-2/img07.jpg" class="img1" alt="">
            <img src="./image-2/小角标.png" class="img2" alt="">
            <img src="./image-2/小角标2.png" class="img3" alt="">
            <p>
                <img src="./image-2/角标.png" class="img4" alt="">
                <span>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio recusandae fugit ducimus suscipit error, alias
                    aperiam veniam tempore voluptatibus commodi hic temporibus quisquam repudiandae et, iure fugiat necessitatibus,
                    iste provident.Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio recusandae fugit ducimus suscipit error, alias
                    aperiam 
                </span>
            </p>
        </div>
    </div>
</body>
</html>